<template>
  <section class="card-box card-three">
      <div class="card-header">
        <CardTitle :title="'今日新闻'" @showCalendar="setOpenPicker"></CardTitle>
      </div>

       <div class="card-content">
         <NoData v-if="list.length == 0"></NoData>
          <div class="txt-wrapper" v-for="it,i in list" :key="i">
            <h3 @click="goToNewPage(it.url)">{{ it.title }}</h3>
            <p>{{ it.content }}</p>
            <section class="txt-subtxt">
              <span class="labels-txt">
                <i v-for="t in it.labels" :key="t.id">{{ t.name }}</i>
              </span>
              <span class="star-box">
                <Star :activeNum="it.star"></Star>
              </span>
            </section>
            <section class="txt-info">
              <span class="info-left">
                {{ it.mediaName +' · '+ it.plate }}
              </span>
              <span class="info-right">
                <span class="info-source">{{ it.editor }}</span>
                <span class="info-time">{{ dateFormatMX("YYYY-mm-dd HH:MM:SS",it.publishTime) }}</span>
              </span>
            </section>
          </div>
       </div>

       <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="handleConfirm" class="cdatePicker" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"></mt-datetime-picker>

       <!-- <div class="card-footer">
         <CardFooter></CardFooter>
       </div> -->

  </section>
</template>

<script scoped>

import CardTitle from '@/components/card-title/index.vue'
import CardFooter from '@/components/card-foot/index.vue'
import Star from '@/components/star-box/index.vue'
import NoData from '@/components/no-data/null.vue'


import { mapState } from 'vuex';

// 新闻列表
export default {
  name:'card-three',
  data(){
    return {
      pickerValue: new Date(),
      list: [], // 新闻列表
      params:{
        page: 1,
        size: 500,
        totalNum: 6,
        totalPage: 1,
      },
      pramsAttr:{
        startTime: '',
        endTime: ''
      }
    }
  },
  created(){
    this.requestNewListApi();
  },  
  methods:{
    // 获取新闻列表
    requestNewListApi(){
      this.axios.get(`${this.serverApi}/news/list`,{
        params: this.pramsAttr
      }).then(res => {
        if(res.data.data){
          this.list = res.data.data.data;

          // 其他参数
          this.params.page = res.data.data.page;
          this.params.size = res.data.data.size;
          this.params.totalNum = res.data.data.totalNum;
          this.params.totalPage = res.data.data.totalPage;

          // console.log(this.list);
          // debugger
        }
      })
    },
    // 去到新页面
    goToNewPage(url){
      console.log(url);
      window.open(url,Math.random());
    },
    handleConfirm(v){
      console.log(v)
      // 重新请求
      this.pramsAttr.startTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime()).getTime(); // 当天0点
      this.pramsAttr.endTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1 ).getTime();// 当天23:59

      this.requestNewListApi();
    },
    setOpenPicker(){
      
      // document.querySelector('.v-modal').style.position = 'absolute';
      this.$refs.picker.$el.style.position = 'absolute';
      this.$refs.picker.open();
      let t = setInterval(() => {
        // console.log(this.$refs.picker.$el)
       if(this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal').length > 0){
         this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal')[0].style.display = 'none';
         window.clearInterval(t);
       }
      },30);
    }
  },
  computed:{
    ...mapState(['serverApi','imgApi']),

  },
  components:{
    CardTitle,
    CardFooter,
    Star,
    NoData
  }
}
</script>

<style scoped lang="scss">
  .card-box{
    width:100%;height:100%;background-color:#fff;position:relative;overflow:hidden;
    /* card-content */
    .card-content{
      width:100%;height:calc(100% - 100px);margin-top:10px;background-color:#fff;position:relative;overflow-x:hidden;overflow-y:auto;
      .txt-wrapper{
        width:calc(100% - 32px);height:150px;margin:0 auto;margin-bottom:30px;box-shadow:0 2px 6px #ddd;border-radius:3px;box-sizing:border-box;padding:0 20px;
        h3{margin:0;font-size:13px;height:45px;line-height:45px;font-weight:600;cursor: pointer;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
        p{margin:0;font-size:15px;width:100%;height:23px;line-height:23px;color:#ccc;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
        /* txt-subtxt */
        .txt-subtxt{
          width:100%;margin-top:25px;display:flex;flex-wrap:nowrap;justify-content: space-between;height:25px;line-height:25px;
          .labels-txt{
            i{
              display: inline-block;font-size:12px;font-style: normal;box-sizing:border-box;height:25px;padding:0px 8px;border:1px solid #e7e7e7;border-radius:5px;color:#bbb;background-color:#fafafa;margin-left:8px;
              &:first-of-type{ margin-left:0; }
            }
          }
        }
        /* txt-info */
        .txt-info{
          width:100%;height:22px;line-height:22px;font-size:13px;display: flex;flex-wrap: nowrap;justify-content: space-between;color:#8a8a8a;position:relative;top:5px;
          .info-source{ color:#8a8a8a; margin-right:12px;}
          .info-time{ color:#cacaca; }
        }
      }
    }

    /* card-more */
    .card-footer{
      width:100%;height:66px;position:absolute;left:0;bottom:0;
      // .view-more{padding:10px 30px;color:#fff;background-color:#268eff;}
    }
  }
</style>